<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交活动推荐</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1000px;
        }
        
        .page-title {
            text-align: center;
            margin: 2.5rem 0 1.5rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #e2e8f0;
        }
        
        .section-heading {
            font-weight: 700;
            margin: 2.5rem 0 1.5rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #3b82f6;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .section-description {
            color: #64748b;
            margin-bottom: 1.5rem;
        }
        
        /* 活动卡片通用样式 */
        .event-card {
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 1.5rem;
        }
        
        .event-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
        }
        
        /* 活动状态标签 */
        .event-status {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            margin-right: 0.5rem;
        }
        
        .status-upcoming {
            background-color: #dbeafe;
            color: #1e40af;
        }
        
        .status-hot {
            background-color: #fee2e2;
            color: #991b1b;
        }
        
        .status-ending {
            background-color: #fef3c7;
            color: #92400e;
        }
        
        .status-past {
            background-color: #e2e8f0;
            color: #64748b;
        }
        
        /* 活动头部信息 */
        .event-header {
            padding: 1rem 1.25rem;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            border-bottom: 1px solid #f1f5f9;
        }
        
        .event-organizer {
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .organizer-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
        }
        
        .organizer-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .organizer-info {
            font-size: 0.875rem;
        }
        
        .organizer-name {
            font-weight: 600;
            color: #1e293b;
            text-decoration: none;
        }
        
        .organizer-name:hover {
            color: #3b82f6;
        }
        
        /* 活动日期时间 */
        .event-date {
            background-color: #f1f5f9;
            border-radius: 6px;
            padding: 0.5rem;
            text-align: center;
            font-size: 0.875rem;
            min-width: 80px;
        }
        
        .date-day {
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1;
            color: #3b82f6;
        }
        
        .date-month {
            font-weight: 600;
            text-transform: uppercase;
            font-size: 0.75rem;
        }
        
        .event-time {
            font-size: 0.875rem;
            color: #64748b;
            margin-top: 0.25rem;
        }
        
        /* 活动内容区域 */
        .event-body {
            padding: 1.25rem;
        }
        
        .event-title {
            font-weight: 700;
            font-size: 1.25rem;
            margin-bottom: 0.75rem;
            line-height: 1.4;
        }
        
        .event-title a {
            color: #1e293b;
            text-decoration: none;
            transition: color 0.2s;
        }
        
        .event-title a:hover {
            color: #3b82f6;
        }
        
        .event-description {
            color: #64748b;
            margin-bottom: 1rem;
            line-height: 1.6;
        }
        
        /* 活动图片样式 */
        .event-images {
            margin-bottom: 1rem;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .single-image img {
            width: 100%;
            height: auto;
            display: block;
        }
        
        .multiple-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 3px;
        }
        
        .multiple-images img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        
        .multiple-images.two-images img:first-child {
            grid-row: span 2;
        }
        
        .multiple-images.three-images img:first-child {
            grid-column: span 2;
            grid-row: span 2;
        }
        
        .multiple-images.four-images {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
        }
        
        /* 活动详情信息 */
        .event-details {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1rem;
            font-size: 0.875rem;
        }
        
        .detail-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #64748b;
        }
        
        .detail-item i {
            color: #3b82f6;
            width: 16px;
        }
        
        /* 活动互动区域 */
        .event-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 1.25rem;
            border-top: 1px solid #f1f5f9;
        }
        
        .action-counts {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            font-size: 0.875rem;
            color: #64748b;
        }
        
        .count-item {
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        
        .action-buttons {
            display: flex;
            gap: 0.75rem;
        }
        
        .btn {
            padding: 0.5rem 1.25rem;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.875rem;
            transition: all 0.2s ease;
        }
        
        .btn-primary {
            background-color: #3b82f6;
            color: white;
            border: none;
        }
        
        .btn-primary:hover {
            background-color: #2563eb;
        }
        
        .btn-outline {
            background-color: transparent;
            color: #3b82f6;
            border: 1px solid #3b82f6;
        }
        
        .btn-outline:hover {
            background-color: #f1f5f9;
        }
        
        /* 列表视图样式 */
        .list-view .event-card {
            display: flex;
            height: 220px;
        }
        
        .list-view .event-images {
            flex: 0 0 220px;
            margin-bottom: 0;
            border-radius: 10px 0 0 10px;
        }
        
        .list-view .event-images img {
            height: 100%;
            object-fit: cover;
        }
        
        .list-view .event-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .list-view .event-body {
            flex: 1;
            overflow: hidden;
        }
        
        .list-view .event-description {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 网格视图样式 */
        .grid-view {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .grid-view .event-card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .grid-view .event-images {
            height: 180px;
        }
        
        .grid-view .event-images img {
            height: 100%;
            object-fit: cover;
        }
        
        .grid-view .event-body {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .grid-view .event-description {
            flex: 1;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 无图片活动样式 */
        .no-image .event-body {
            padding-top: 0;
        }
        
        /* 视图切换控件 */
        .view-controls {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 1.5rem;
            gap: 0.5rem;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            cursor: pointer;
            color: #64748b;
            transition: all 0.2s;
        }
        
        .view-btn.active {
            background-color: #3b82f6;
            color: white;
            border-color: #3b82f6;
        }
        
        .view-btn:hover:not(.active) {
            background-color: #f1f5f9;
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .grid-view {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }
        
        @media (max-width: 768px) {
            .list-view .event-card {
                flex-direction: column;
                height: auto;
            }
            
            .list-view .event-images {
                flex: none;
                height: 200px;
                border-radius: 10px 10px 0 0;
            }
            
            .event-details {
                gap: 0.75rem;
            }
            
            .action-buttons {
                gap: 0.5rem;
            }
            
            .btn {
                padding: 0.5rem 1rem;
                font-size: 0.8125rem;
            }
        }
        
        @media (max-width: 576px) {
            .grid-view {
                grid-template-columns: 1fr;
            }
            
            .event-header {
                flex-direction: column;
                gap: 1rem;
            }
            
            .event-date {
                align-self: flex-start;
            }
            
            .event-actions {
                flex-direction: column;
                gap: 1rem;
                align-items: stretch;
            }
            
            .action-counts {
                width: 100%;
                justify-content: space-around;
            }
            
            .action-buttons {
                width: 100%;
                justify-content: space-between;
            }
            
            .btn {
                flex: 1;
                text-align: center;
            }
            
            .multiple-images {
                grid-gap: 2px;
            }
        }
    </style>
</head>
<body>
    <div class="container py-5">
        <!-- 页面标题 -->
        <div class="page-title">
            <h1 class="display-5 mb-2">社区活动推荐</h1>
            <p class="text-muted">发现周边精彩活动，结识志同道合的朋友</p>
        </div>
        
        <!-- 热门活动 - 网格视图 -->
        <section>
            <h2 class="section-heading">
                <i class="fas fa-fire"></i> 热门活动
            </h2>
            <p class="section-description">参与度高、评价好的精选活动，不容错过</p>
            
            <!-- 视图切换 -->
            <div class="view-controls">
                <button class="view-btn active" id="grid-view-btn">
                    <i class="fas fa-th"></i> 网格视图
                </button>
                <button class="view-btn" id="list-view-btn">
                    <i class="fas fa-list"></i> 列表视图
                </button>
            </div>
            
            <div class="events-container grid-view" id="events-container">
                <!-- 带单张图片的活动 -->
                <div class="event-card">
                    <div class="event-images">
                        <div class="single-image">
                            <img src="https://picsum.photos/600/400?random=10" alt="城市马拉松活动海报">
                        </div>
                    </div>
                    
                    <div class="event-content">
                        <div class="event-header">
                            <div class="event-organizer">
                                <div class="organizer-avatar">
                                    <img src="https://picsum.photos/40/40?random=1" alt="活动组织者头像">
                                </div>
                                <div class="organizer-info">
                                    主办方: <a href="#" class="organizer-name">城市运动协会</a>
                                </div>
                            </div>
                            
                            <div class="event-date">
                                <div class="date-month">10月</div>
                                <div class="date-day">22</div>
                                <div class="event-time">周日</div>
                            </div>
                        </div>
                        
                        <div class="event-body">
                            <div class="event-title">
                                <a href="#">
                                    <span class="event-status status-hot">热门</span>
                                    2023城市半程马拉松大赛
                                </a>
                            </div>
                            
                            <p class="event-description">
                                一年一度的城市马拉松大赛即将开始，今年新增了亲子跑项目，适合各年龄段参与者。赛事路线经过城市多个地标建筑，让你在运动的同时欣赏城市美景。
                            </p>
                            
                            <div class="event-details">
                                <div class="detail-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>城市体育中心</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>08:00 - 12:00</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-ticket-alt"></i>
                                    <span>¥80起</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="event-actions">
                            <div class="action-counts">
                                <div class="count-item">
                                    <i class="fas fa-user-check"></i>
                                    <span>1248人报名</span>
                                </div>
                                <div class="count-item">
                                    <i class="far fa-heart"></i>
                                    <span>356收藏</span>
                                </div>
                            </div>
                            
                            <div class="action-buttons">
                                <button class="btn btn-primary">报名参加</button>
                                <button class="btn btn-outline">分享</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 带多张图片的活动 -->
                <div class="event-card">
                    <div class="event-images">
                        <div class="multiple-images two-images">
                            <img src="https://picsum.photos/600/800?random=21" alt="音乐节舞台现场">
                            <img src="https://picsum.photos/600/400?random=22" alt="音乐节观众互动">
                        </div>
                    </div>
                    
                    <div class="event-content">
                        <div class="event-header">
                            <div class="event-organizer">
                                <div class="organizer-avatar">
                                    <img src="https://picsum.photos/40/40?random=2" alt="活动组织者头像">
                                </div>
                                <div class="organizer-info">
                                    主办方: <a href="#" class="organizer-name">星空文化</a>
                                </div>
                            </div>
                            
                            <div class="event-date">
                                <div class="date-month">10月</div>
                                <div class="date-day">28</div>
                                <div class="event-time">周六</div>
                            </div>
                        </div>
                        
                        <div class="event-body">
                            <div class="event-title">
                                <a href="#">
                                    <span class="event-status status-upcoming">即将开始</span>
                                    秋季城市音乐节
                                </a>
                            </div>
                            
                            <p class="event-description">
                                汇集众多独立音乐人和乐队，涵盖民谣、摇滚、电子等多种风格。现场设有创意市集和美食区，打造全方位的音乐狂欢体验。
                            </p>
                            
                            <div class="event-details">
                                <div class="detail-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>中央公园</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>16:00 - 22:00</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-ticket-alt"></i>
                                    <span>¥120起</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="event-actions">
                            <div class="action-counts">
                                <div class="count-item">
                                    <i class="fas fa-user-check"></i>
                                    <span>856人报名</span>
                                </div>
                                <div class="count-item">
                                    <i class="far fa-heart"></i>
                                    <span>243收藏</span>
                                </div>
                            </div>
                            
                            <div class="action-buttons">
                                <button class="btn btn-primary">报名参加</button>
                                <button class="btn btn-outline">分享</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 无图片的活动 -->
                <div class="event-card no-image">
                    <div class="event-content">
                        <div class="event-header">
                            <div class="event-organizer">
                                <div class="organizer-avatar">
                                    <img src="https://picsum.photos/40/40?random=3" alt="活动组织者头像">
                                </div>
                                <div class="organizer-info">
                                    主办方: <a href="#" class="organizer-name">城市读书会</a>
                                </div>
                            </div>
                            
                            <div class="event-date">
                                <div class="date-month">10月</div>
                                <div class="date-day">21</div>
                                <div class="event-time">周六</div>
                            </div>
                        </div>
                        
                        <div class="event-body">
                            <div class="event-title">
                                <a href="#">
                                    <span class="event-status status-upcoming">即将开始</span>
                                    经典文学赏析会：《百年孤独》
                                </a>
                            </div>
                            
                            <p class="event-description">
                                一起探讨加西亚·马尔克斯的魔幻现实主义经典作品，分析其叙事结构和象征意义。活动将包括主题分享、小组讨论和阅读体验交流环节。
                            </p>
                            
                            <div class="event-details">
                                <div class="detail-item">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>市立图书馆</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-clock"></i>
                                    <span>14:00 - 16:30</span>
                                </div>
                                <div class="detail-item">
                                    <i class="fas fa-ticket-alt"></i>
                                    <span>免费</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="event-actions">
                            <div class="action-counts">
                                <div class="count-item">
                                    <i class="fas fa-user-check"></i>
                                    <span>42人报名</span>
                                </div>
                                <div class="count-item">
                                    <i class="far fa-heart"></i>
                                    <span>78收藏</span>
                                </div>
                            </div>
                            
                            <div class="action-buttons">
                                <button class="btn btn-primary">报名参加</button>
                                <button class="btn btn-outline">分享</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 近期活动 - 带四张图片的活动 -->
        <section>
            <h2 class="section-heading">
                <i class="fas fa-calendar-alt"></i> 近期活动
            </h2>
            <p class="section-description">未来两周内即将举办的精彩活动</p>
            
            <div class="event-card">
                <div class="event-images">
                    <div class="multiple-images four-images">
                        <img src="https://picsum.photos/600/600?random=31" alt="创意市集摊位">
                        <img src="https://picsum.photos/600/600?random=32" alt="手工艺品展示">
                        <img src="https://picsum.photos/600/600?random=33" alt="现场制作体验">
                        <img src="https://picsum.photos/600/600?random=34" alt="市集美食区">
                    </div>
                </div>
                
                <div class="event-content">
                    <div class="event-header">
                        <div class="event-organizer">
                            <div class="organizer-avatar">
                                <img src="https://picsum.photos/40/40?random=4" alt="活动组织者头像">
                            </div>
                            <div class="organizer-info">
                                主办方: <a href="#" class="organizer-name">创意联盟</a>
                            </div>
                        </div>
                        
                        <div class="event-date">
                            <div class="date-month">10月</div>
                            <div class="date-day">29</div>
                            <div class="event-time">周日</div>
                        </div>
                    </div>
                    
                    <div class="event-body">
                        <div class="event-title">
                            <a href="#">
                                <span class="event-status status-upcoming">即将开始</span>
                                秋日创意市集 & 手作体验日
                            </a>
                        </div>
                        
                        <p class="event-description">
                            汇集本地手工艺人、独立设计师和美食达人，打造一场充满创意的秋日盛会。现场设有20+手作体验工作坊，从陶艺、木工到布艺，适合各年龄段参与。还有亲子互动区和露天音乐表演。
                        </p>
                        
                        <div class="event-details">
                            <div class="detail-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>文化创意园区</span>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-clock"></i>
                                <span>10:00 - 20:00</span>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-ticket-alt"></i>
                                <span>免费入场，体验项目另收费</span>
                            </div>
                            <div class="detail-item">
                                <i class="fas fa-user-friends"></i>
                                <span>适合亲子、朋友、情侣</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="event-actions">
                        <div class="action-counts">
                            <div class="count-item">
                                <i class="fas fa-user-check"></i>
                                <span>328人报名</span>
                            </div>
                            <div class="count-item">
                                <i class="far fa-heart"></i>
                                <span>512收藏</span>
                            </div>
                            <div class="count-item">
                                <i class="far fa-comment"></i>
                                <span>42条评论</span>
                            </div>
                        </div>
                        
                        <div class="action-buttons">
                            <button class="btn btn-primary">报名参加</button>
                            <button class="btn btn-outline">分享</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 即将结束报名的活动 -->
        <section>
            <h2 class="section-heading">
                <i class="fas fa-exclamation-circle"></i> 即将结束报名
            </h2>
            <p class="section-description">报名即将截止，感兴趣的抓紧时间哦</p>
            
            <div class="row">
                <!-- 左侧活动 -->
                <div class="col-md-6">
                    <div class="event-card">
                        <div class="event-images">
                            <div class="single-image">
                                <img src="https://picsum.photos/600/400?random=41" alt="公益环保活动照片">
                            </div>
                        </div>
                        
                        <div class="event-content">
                            <div class="event-header">
                                <div class="event-organizer">
                                    <div class="organizer-avatar">
                                        <img src="https://picsum.photos/40/40?random=5" alt="活动组织者头像">
                                    </div>
                                    <div class="organizer-info">
                                        主办方: <a href="#" class="organizer-name">绿色未来协会</a>
                                    </div>
                                </div>
                                
                                <div class="event-date">
                                    <div class="date-month">10月</div>
                                    <div class="date-day">25</div>
                                    <div class="event-time">周三</div>
                                </div>
                            </div>
                            
                            <div class="event-body">
                                <div class="event-title">
                                    <a href="#">
                                        <span class="event-status status-ending">即将结束</span>
                                        城市公园清洁公益行动
                                    </a>
                                </div>
                                
                                <p class="event-description">
                                    一起参与城市公园清洁活动，为保护环境贡献一份力量。活动提供清洁工具和手套，完成活动可获得公益证书。
                                </p>
                                
                                <div class="event-details">
                                    <div class="detail-item">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <span>南湖公园</span>
                                    </div>
                                    <div class="detail-item">
                                        <i class="fas fa-clock"></i>
                                        <span>09:00 - 11:30</span>
                                    </div>
                                    <div class="detail-item">
                                        <i class="fas fa-ticket-alt"></i>
                                        <span>免费</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="event-actions">
                                <div class="action-counts">
                                    <div class="count-item">
                                        <i class="fas fa-user-check"></i>
                                        <span>76人报名</span>
                                    </div>
                                    <div class="count-item">
                                        <i class="far fa-heart"></i>
                                        <span>32收藏</span>
                                    </div>
                                </div>
                                
                                <div class="action-buttons">
                                    <button class="btn btn-primary">最后报名</button>
                                    <button class="btn btn-outline">分享</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧活动 -->
                <div class="col-md-6">
                    <div class="event-card no-image">
                        <div class="event-content">
                            <div class="event-header">
                                <div class="event-organizer">
                                    <div class="organizer-avatar">
                                        <img src="https://picsum.photos/40/40?random=6" alt="活动组织者头像">
                                    </div>
                                    <div class="organizer-info">
                                        主办方: <a href="#" class="organizer-name">创业者联盟</a>
                                    </div>
                                </div>
                                
                                <div class="event-date">
                                    <div class="date-month">10月</div>
                                    <div class="date-day">26</div>
                                    <div class="event-time">周四</div>
                                </div>
                            </div>
                            
                            <div class="event-body">
                                <div class="event-title">
                                    <a href="#">
                                        <span class="event-status status-ending">即将结束</span>
                                        初创企业融资与发展交流会
                                    </a>
                                </div>
                                
                                <p class="event-description">
                                    邀请资深投资人与成功创业者分享融资经验和企业发展策略，现场设有项目路演和一对一咨询环节，适合初创团队参加。
                                </p>
                                
                                <div class="event-details">
                                    <div class="detail-item">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <span>科技创业中心</span>
                                    </div>
                                    <div class="detail-item">
                                        <i class="fas fa-clock"></i>
                                        <span>14:00 - 17:30</span>
                                    </div>
                                    <div class="detail-item">
                                        <i class="fas fa-ticket-alt"></i>
                                        <span>¥50</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="event-actions">
                                <div class="action-counts">
                                    <div class="count-item">
                                        <i class="fas fa-user-check"></i>
                                        <span>108人报名</span>
                                    </div>
                                    <div class="count-item">
                                        <i class="far fa-heart"></i>
                                        <span>94收藏</span>
                                    </div>
                                </div>
                                
                                <div class="action-buttons">
                                    <button class="btn btn-primary">最后报名</button>
                                    <button class="btn btn-outline">分享</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 视图切换功能
            const gridViewBtn = document.getElementById('grid-view-btn');
            const listViewBtn = document.getElementById('list-view-btn');
            const eventsContainer = document.getElementById('events-container');
            
            gridViewBtn.addEventListener('click', function() {
                eventsContainer.classList.remove('list-view');
                eventsContainer.classList.add('grid-view');
                gridViewBtn.classList.add('active');
                listViewBtn.classList.remove('active');
            });
            
            listViewBtn.addEventListener('click', function() {
                eventsContainer.classList.remove('grid-view');
                eventsContainer.classList.add('list-view');
                listViewBtn.classList.add('active');
                gridViewBtn.classList.remove('active');
            });
            
            // 报名按钮交互
            const joinButtons = document.querySelectorAll('.btn-primary');
            joinButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const originalText = this.textContent;
                    this.textContent = '已报名';
                    this.style.backgroundColor = '#10b981';
                    
                    // 更新报名人数
                    const eventCard = this.closest('.event-card');
                    const countItem = eventCard.querySelector('.count-item .fas.fa-user-check').parentElement;
                    if (countItem) {
                        let countText = countItem.textContent;
                        let count = parseInt(countText.match(/\d+/)[0]);
                        countItem.innerHTML = `<i class="fas fa-user-check"></i><span>${count + 1}人报名</span>`;
                    }
                    
                    // 添加已报名提示
                    const notification = document.createElement('div');
                    notification.style.position = 'fixed';
                    notification.style.bottom = '20px';
                    notification.style.right = '20px';
                    notification.style.backgroundColor = '#10b981';
                    notification.style.color = 'white';
                    notification.style.padding = '0.75rem 1.25rem';
                    notification.style.borderRadius = '6px';
                    notification.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
                    notification.style.zIndex = '1000';
                    notification.style.transition = 'all 0.3s ease';
                    notification.textContent = '报名成功！';
                    
                    document.body.appendChild(notification);
                    
                    // 3秒后移除提示
                    setTimeout(() => {
                        notification.style.opacity = '0';
                        setTimeout(() => {
                            document.body.removeChild(notification);
                        }, 300);
                    }, 3000);
                });
            });
            
            // 收藏功能
            const favoriteIcons = document.querySelectorAll('.count-item .far.fa-heart');
            favoriteIcons.forEach(icon => {
                icon.addEventListener('click', function(e) {
                    e.stopPropagation();
                    this.classList.toggle('far');
                    this.classList.toggle('fas');
                    this.style.color = this.classList.contains('fas') ? '#ef4444' : '';
                    
                    // 更新收藏数
                    const countItem = this.parentElement;
                    let countText = countItem.textContent;
                    let count = parseInt(countText.match(/\d+/)[0]);
                    
                    if (this.classList.contains('fas')) {
                        countItem.innerHTML = `<i class="fas fa-heart"></i><span>${count + 1}收藏</span>`;
                    } else {
                        countItem.innerHTML = `<i class="far fa-heart"></i><span>${count - 1}收藏</span>`;
                    }
                });
            });
            
            // 图片点击放大
            const eventImages = document.querySelectorAll('.event-images img');
            eventImages.forEach(image => {
                image.addEventListener('click', function() {
                    // 创建全屏查看的模态框
                    const modal = document.createElement('div');
                    modal.style.position = 'fixed';
                    modal.style.top = '0';
                    modal.style.left = '0';
                    modal.style.width = '100%';
                    modal.style.height = '100%';
                    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
                    modal.style.display = 'flex';
                    modal.style.alignItems = 'center';
                    modal.style.justifyContent = 'center';
                    modal.style.zIndex = '1000';
                    modal.style.cursor = 'zoom-out';
                    
                    const imgClone = this.cloneNode(true);
                    imgClone.style.maxWidth = '90%';
                    imgClone.style.maxHeight = '90%';
                    imgClone.style.objectFit = 'contain';
                    
                    modal.appendChild(imgClone);
                    document.body.appendChild(modal);
                    
                    // 点击模态框关闭
                    modal.addEventListener('click', function() {
                        document.body.removeChild(modal);
                    });
                });
            });
        });
    </script>
</body>
</html>
    
